HTML Basiselementen
Om een webpagina te maken heb je de volgende basiselementen nodig:
- een doctype
- een <html> tag
- een <head> tag
- een <title> tag
- een <meta> tag
- een <body> tag
- doctype
De
<!doctype>declaratie wordt helemaal bovenaan de pagina geplaatst. En is dus het eerste html element dat je nodig hebt om een webpagina te maken.HTML5 is een update van de HyperText Markup Language (HTML). In dit hoofdstuk zullen we beginnen met de elementaire bouwstenen van HTML, de semantische elementen. Daarmee leggen we de basis voor de eenvoudige maar krachtige nieuwe web browser technologieën van HTLM 5.
De HTML5
<!doctype>is gemakkelijk te gebruiken. In een XHTML document was dat wel anders:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
De
<!DOCTYPE>tag voor HTML van vroeger, is een erfenis SGML, en bestond uit drie hoofdonderdelen: de codenaam, de openbare id-reeks en de DTD (Document Type Definition) URL. Het is een vreemde mix van hoofdletters en kleine letters, aanhalingstekens en schuine strepen, en een URL naar een nog minder leesbaar bestand. Om het nog vreemder te maken, de<DOCTYPE>tag is uniek, want het is de enige HTML-tag sinds HTML 4.01, die volledig in hoofdletters staat.HTML5 is een vereenvoudigde versie van HTML. De tags zijn minder complex, de functies zijn minder complex, en het belangrijkst is dat de regels minder complex zijn.
HTML5 breekt met dat verleden en maakt het eenvoudig:
<!doctype html>De browser maakt gebruik van de <!doctype> tag om te weten hoe de webpagina gemaakt moet worden. De meeste browsers downloadden de DTD. Ze maakten de webpagina op basis van de
<!DOCTYPE>. Als een browser de vorige code aantrof, schakelde die over op standaard-modus (in tegenstelling tot eigenaardigheden-modus) en XHTML transitionele opmaak toepassen.Hoe komt HTML5 met een basis
<!doctype>zoals html weg? Het antwoord is eenvoudig. De nieuwe<!doctype>tag vertrekt van een vereenvoudigde benadering van document rendering. Browsermakers hebben overeenstemming bereikt over hoe browser-specifieke functionaliteit moet worden behandeld. Er is dus geen behoefte aan "quirks mode" om een webpagina samen te stellen. Als alle browsers op een standaard manier weergeven, is de DTD niet nodig. Een eenvoudige html declarering stelt dat de browser gewoon moet weergeven zonder met een DTD rekening te houden.HTML 5 is dan misschien wel eenvoudiger maar wat doe je met oudere browsers? Er bestaat een HTML5
<!doctype>tag die compatibel is met oudere browsers:<!DOCTYPE html>Dat is dezelfde
<!doctype>als daarnet maar nu in hoofdletters. De HTML 5-specificatie stelt dat de<!doctype>niet hoofdlettergevoelig is. Maar eerdere versies van HTML vereisen dat<!doctype>in hoofdletters staat. Je zal merken dat veel van HTML5 achterwaarts compatibel is met eerdere versies. De overgrote meerderheid van browsers op de markt herkennen de nieuwe<!doctype>tag en herkennen die als gewoon "standards-modus". Met behulp van de achterwaarts compatibele versie van de<!doctype>kan je nu al HTML5 gebruiken en toch compatibel zijn met browsers van het verleden! - html
Het html element markeert het begin en einde van een HTML-document en geeft aan dat het document HTML-code bevat.
In ons voorbeeld ziet het html element er zo uit:
<html lang="nl"> <head> </head> <body> </body> </html>
Een HTML-document bestaat uit twee delen: de
<head>en de<body>.Het
<html>element wordt ook wel het root-element van webpagina genoemd.Gebruik van het lang attribuut:
- het indexeren van webpagina's door zoekmachines;
- spraaksynthesizers kunnen achterhalen hoe ze de tekst moeten uitspreken;
- head en title
Het
<head>element bevat informatie over de webpagina die niet in het documentvenster wordt weergegeven. Die informatie zijn bijvoorbeeld instructies aan de browser over hoe het document verwerkt of weergegeven moet worden.In het
<head>van elk document moet in ieder geval het<title>element worden opgenomen. Hiermee wordt een titel vastgelegd, welke in de meeste browsers te zien is in de titelbalk van het venster.<!DOCTYPE html> <html lang="nl"> <head> <meta charset="utf-8" /> <title>Bloemlezing</title> </head> <body> </body> </html> -
body <!DOCTYPE html> <html lang="nl"> <head> <meta charset="utf-8" /> <title>Bloemlezing</title> </head> <body> </body> </html>